<template>
  <!-- 大图片以及作者的信息 -->
  <div>
    <div
      class="heard-Banner-wrap">
      <img :src="image" alt="">
      <div class="title_box">
        <div class="title_box_item">
          <h3>{{ title }}</h3>
        </div>
        <div>
          <button>顶</button>
          <span>{{ zan }}</span>
        </div>
      </div>
    </div>
    <!-- 用户信息 -->
    <div class="user">
      <div class="user_des">
        <div class="icon">
          <router-link to="">
            <img :src="authorimg" alt="" />
          </router-link>
        </div>
        <div class="user_name">
          <router-link to="" class="user_name_item"
            ><span>{{ author }}</span
            ><span>({{ address }})</span></router-link
          >
          <router-link to="" class="grade"><span>lv.37</span></router-link>
          <router-link to="" class="atten"
            ><span
              ><img
                src="http://images.mafengwo.net/images/home/tweet/btn_sfollow.gif"
                alt="" /></span
          ></router-link>
        </div>
        <div class="time">
          <span>2019-02-26 20:15</span><span class="count">{{ browse }}</span>
        </div>
        <div class="share">
          <div class="collec" @click="collect()"><span>3879</span>收藏</div>
          <div class="share_item" @click="shair()">
            <span>342</span>分享
            <div class="hide_share">
              <span class="weibo"></span>
              <span class="qzone"></span>
              <span class="wechat"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import session from "../../http/session";
export default {
  name: "WorkspaceJsonDestination",

  data() {
    return {
      mid: 5,
      title: "",
      image: "",
      author: "",
      authorimg: "",
      address: "",
      zan: "",
      browse: "",
      windowUrl: window.location.href,
    };
  },

  mounted() {
    if (location.search.split("=")[1]) {
      this.mid = location.search.split("=")[1];
    }
    this.$http.get(`/communDetail?mid=${this.mid}`).then((result) => {
      this.title = result.data.data[0].title;
      this.image = result.data.data[0].imagesBig;
      this.author = result.data.data[0].author;
      this.authorimg = result.data.data[0].authorImg.split("?")[0];
      this.address = result.data.data[0].address.split("，")[0];
      this.zan = result.data.data[0].zan;
      this.browse = result.data.data[0].browse;
    });
  },

  methods: {
    collect() {
      if (sessionStorage.getItem("cookie-session")) {
        // 查询用户名
        session().then((res) => {
          let username = res.data.data[0].uname;

          this.$http
            .post("/collect", {
              username: username,
              title: this.title,
              image: this.image,
              lable: this.lable,
              author: this.author,
              mid: this.mid,
            })
            .then((result) => {
              console.log(result);
              if (result.data.coded == 200) {
                this.$message({
                  message: "收藏成功，请去个人中心查看",
                  type: "success",
                });
              } else if (result.data.coded == 205) {
                this.$message({
                  message: "该帖已经收藏",
                  type: "warning",
                });
              }
            });
        });
      } else {
        this.$message({
          message: "请先登录！！",
          type: "error",
        });
      }
    },

    // 点击复制当前浏览器地址
    shair() {
      var domUrl = document.createElement("input");
      domUrl.value = this.windowUrl;
      domUrl.id = "creatDom";
      document.body.appendChild(domUrl);
      domUrl.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      let creatDom = document.getElementById("creatDom");
      creatDom.parentNode.removeChild(creatDom);
      this.$message({
        message: "复制成功",
        type: "success",
      });
      // 跳转微信
       window.location.href = "weixin://";
    },
  },
};
</script>

<style lang="scss" scoped>
// banner图部分
.heard-Banner-wrap {
  position: relative;
  width: 100%;
  img{
    width: 100%;
  }
  .title_box {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1200px;
    height: 80px;
    margin-left: -600px;
    .title_box_item {
      position: relative;
      float: left;
      width: 710px;
      height: 80px;
      line-height: -90px;
      font-size: 26px;
      color: white;
      overflow: hidden;
      margin-left: 210px;
      &:hover {
        h3 {
          margin-left: -80%;
        }
      }
      h3 {
        text-align: right;
        margin-left: 0;
        transition: 2s;
        white-space: nowrap;
      }
      &:nth-child(2){
        margin-top: 20px;
      }
    }
    div {
      float: left;
      width: 56px;
      text-align: center;
      margin-top: 18px;
      margin-left: 175px;
      button {
        width: 56px;
        height: 30px;
        line-height: 30px;
        background: #41c1ec;
        border: none;
        color: white;
        font-size: 18px;

        cursor: pointer;
        border-radius: 5px;
        &:hover {
          // color: #ccc;
          // opacity: 0.6;
          // background: #6495ED;
          color: #708090;
        }
      }
      span {
        color: white;
        font-weight: 700;
      }
    }
  }
}

// 用户资料部分
.user {
  width: 100%;
  border-bottom: 1px solid #e8e8e6;
  .user_des {
    width: 1200px;
    height: 80px;
    border-right: 1px solid #e8e8e6;
    margin: 0 auto;
    div {
      float: left;
    }
    .icon {
      width: 120px;
      height: 120px;
      margin-top: -82px;
      border-radius: 60px;
      overflow: hidden;
      img {
        position: relative;
        width: 100%;
      }
    }
    .user_name {
      float: left;
      margin-left: 42px;
      line-height: 42px;
      font-size: 14px;
      .user_name_item {
        color: #41c1ec;
        text-decoration: none;
        &:hover span {
          text-decoration: underline;
        }
      }

      .grade {
        margin-left: 8px;
        color: #ea3c1a;
        text-decoration: none;
        font-weight: 700;
      }
      .atten {
        display: inline-block;
        width: 38px;
        height: 13px;
        margin-left: 8px;
        margin-top: 3px;
        img {
          width: 100%;
        }
      }
    }
    .time {
      font-size: 14px;
      color: #acacac;
      line-height: 45px;
      margin-left: 30px;
      .count {
        display: inline-block;
        padding-left: 20px;
        margin-left: 20px;
        background: url("../.././assets/home_detail_icon/eye.png") no-repeat 0
          13px;
      }
    }
    .share {
      //右侧部分
      float: right;
      div {
        width: 144px;
        height: 80px;
        font-size: 14px;
        border-left: 1px solid #e8e8e6;
        color: #666;
        text-align: center;
        line-height: 112px;
        cursor: pointer;
      }
      .collec {
        background: url("../.././assets/home_detail_icon/star.png") no-repeat
          58px 17px;
      }
      .share_item {
        position: relative;
        background: url("../.././assets/home_detail_icon/share.png") no-repeat
          58px 17px;
        .hide_share {
          position: absolute;
          top: 80px;
          right: 0;
          max-height: 0px;
          opacity: 0;
          width: 195px;
          border: 1px solid #e8e8e6;
          background: white;
          border-radius: 5px;
          z-index: 10;
          transition: 0.3s;
          span {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
            margin-right: 13px;
            border-radius: 5px;
            background-color: red;
          }
          .weibo {
            background: #d84c4c url("../.././assets/home_detail_icon/weibo.png")
              no-repeat 5px 5px;
          }
          .qzone {
            background: #3f8bc0 url("../.././assets/home_detail_icon/qzone.png")
              no-repeat 5px 5px;
          }
          .wechat {
            background: #73a64f
              url("../.././assets/home_detail_icon/wechat.png") no-repeat 5px
              5px;
          }
        }
        &:hover {
          .hide_share {
            max-height: 60px;
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>